<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../plugins/vue.min.js"></script>
  </head>
  <body>
    <div id="box">
      <button @click="getMessage">fetch</button>
    </div>
    <script>
      let vm = new Vue({
        el: "#box",
        data: {
          myUsername: "huhu",
        },
        methods: {
          getMessage() {
            fetch("./0-test.json")
              .then(res=>res.json())
              .then(res=>{
                  // 打印的是一些状态码,请求头
                  console.log(res)
                  // return res.json()
              })
              // .then((res) => {
              //   console.log(res);
              // })
              // 处理异常
              .catch((err) => {
                console.log(err);
              });
          },

        //   演示正常fetch的使用方式
        // get  请求方式,则直接拼接在url后面,不能带有   boday
          getFetch() {
            const url = "192.168.32.45:8081/login.shtml";
            fetch(url, {
              method: "POST",
              headers: {
                Accept: "application/json",
                "Content-Type": "application/json",
              },
              body: JSON.stringify({ username: "fll", password: "123" }),
            })
              .then((response) => {
                if (response.status == 200) {
                  return response;
                }
              })
              .then((data) => {
                return data.text();
              })
              .then((text) => {
                console.log("请求成功", text);
              })
              .catch((err) => {
                console.log("请求错误", err);
              });
          },
        },
      });
    </script>
  </body>
</html>
